<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>融弈签</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			/**该css为解决滑动时候警告：Unable to preventDefault inside passive event listener**/
			* { touch-action: pan-y; } 
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.header-bg-div {
				width: 100%;
				height: 200px;
				/*background: url(../img/index/goods_image.png);
				background-size: 100% 100%;*/
				position: relative;
			}
			.shadow-div {
				width: 100%;
				height: 200px;
				text-align: -webkit-center;
			}
			.tips-container {
				width: 100%;
				height: 30px;
				text-align: left;
				position: absolute;
				left: 0px;
				bottom: 0px;
				background-color: rgba(0, 0, 0, 0.7);
			}
			.tips-div {
				margin: 0px 15px 0px 35px;
				width: 320px;
				height: 30px;
				overflow: hidden;
				position: relative;
			}
			.horn-icon {
				width: 16px;
				height: 16px;
				position: absolute;
				left: 10px;
				top: 7px;
				vertical-align: middle;
			}
			.tips-content {
				line-height: 30px;
				font-size: 13px;
				color: #CFCACA;
				position: absolute;
				left: 20px;
				top: 0px;
				margin:0;
			    vertical-align: middle;
				display: inline-block;
				white-space: nowrap; 
				/*overflow: hidden;*/
				text-overflow:ellipsis;
			}
			.go-detail {
				position: absolute;
				width: 7px;
				height: 13px;
				right: 15px;
    				top: 8px;
			}
			.addr-panel {
				position: relative;
				padding-top: 65px;
			}
			.addr-choose-div {
				width: 180px;
				height: 30px;
				opacity: 0.75;
				/*border: 1px solid #FFFFFF;*/
				background-color: #101010;
				border-radius: 29px;
			}
			.addr-choose-div div {
				font-size: 14px;
				color: #FFFFFF;
				line-height: 30px;
				display: inline-block;
			}
			.addr-title {
				width: 80px;
			}
			.addr-city {
				width: 70px;
			}
			.addr-city img{
				width: 24px;
				height: 24px;
				margin-bottom: 8px;
				vertical-align: middle;
			}
			.mui-slider {
				margin-bottom: 60px;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #4990E2;
				font-size: 16px;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
			    border-width: 0px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #4990E2;
			}
			.mui-slider-item {
				min-height: 200px;
			}
			.info {
				position: relative;
				margin: 15px 0px 20px 0px;
			}
			.visa-type-div {
				text-align: center;
				margin: 10px;
			}
			.visa-type-div img {
				width: 160px !important;
				height: 60px;
			}
			.line-div-w {
				width: 100%;
				height: 10px;
				background-color: #f1f1f1;
			}
			.line-div-n {
				width: 100%;
				height: 1px;
				background-color: #D4D6D3;
			}
			.type-choose-container {
				width: 100%;
				margin: 10px 0px;
			}
			.type-choose-div {
				display: inline-block;
				padding: 0px 10px;
				margin-left: 10px;
				border: 1px solid #979797;
				border-radius: 15px;
			}
			.type-choose-div.selected {
				border-color: #FF4747;
			}
			.type-choose-div.selected span {
				color: #FF4747;
			}
			.type-choose-div span {
				font-size: 12px;
				color: #928F8F;
			}
			.package-title {
				font-family: 'PingFangSC-Medium';
				font-size: 14px;
				color: #5C5759;
			}
			.visa-duration {
				margin-top: 10px;
				position: relative;
			}
			.visa-duration .icon {
				width: 14px !important;
				height: 14px;
				vertical-align: middle;
			}
			.visa-duration .duration {
				font-size: 13px;
				color: #928F8F;
				font-family: 'PingFangSC-Medium';
			}
			.visa-duration .price {
				position: absolute;
				right: 10px;
				top: 0px;
			}
			.visa-duration .price span {
				font-family: 'PingFangSC-Medium';
				font-size: 12px;
				color: #FF4747;
			}
			.visa-tips-container {
				padding: 15px;
				margin: 15px 10px;
				border: 1px solid #D9D8D9;
			}
			.visa-tips-container .title {
				font-family: 'PingFangSC-Medium';
				font-size: 12px;
				color: #4D454B;
			}
			.visa-tips-container .tips-bottom {
				margin-top: 15px;
			}
			.visa-tips-container .tips-bottom .update-time {
				font-size: 11px;
				color: #807C7F;
			}
			.visa-tips-container .tips-bottom .difficulty-text {
				font-family: 'PingFangSC-Regular';
				font-size: 11px;
				color: #FF4747;
				float: right;
			}
			.bounced-box-container {
				display: none;
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0px;
				top: 0px;
			    z-index: 10;
		        overflow-y: scroll;
				background-color: rgba(0, 0, 0, 0.7);
			}
			.addr-choose-container {
				width: 80%;
				height: 300px;
				margin-left: 10%;
				background-color: #FFFFFF;
				border-radius: 5px;
				margin-top: 40%;
				text-align: center;
			}
			.live-title {
				padding-top: 8px;
				margin-bottom: 10px;
				font-size: 15px;
				color: #000000;
				font-family: "PingFang-SC-Regular";
			}
			.line-div {
				width: 100%;
				height: 1px;
				background-color: #F3F3F3;
			}
			/**办证攻略**/
			.mui-card {
				margin: 0px;
			}
			.province-ul {
				width: 100%;
				height: 250px;
				overflow-y:scroll;
				text-align: left;
			}
			.province-li {
				margin-left: 7%;
    				width: 24%;
    				margin-top: 15px;
				padding: 5px 0px;
				display: inline-block;
				text-align: center;
				border: 1px solid #ECECEC;
				border-radius: 4px;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #333333;
			}
			.swiper-container {
		      	width: 100%;
		      	height: 100px;
		    }
		    .swiper-slide {
		      	background-position: center;
		      	background-size: cover;
		      	width: 35%;
		      	height: 100px;
		      	text-align: center;
		    }
		    .swiper-slide img {
		    		margin-top: 10px;
		    }
		    .label-Id, .goodsVisaTypeId, .strategy-div, .package-goodsId {
		    		display: none;
		    }
		    .visa-type-img {
		    		width: 100%;
		    		height: auto;
		    }
		    .mui-card .mui-table-view {
		    		border-radius: 0px;
		    }
		    .visaTypeUl .mui-table-view-cell {
	    		    padding: 11px 0px;
		    }
		    .mui-table-view-cell>a:not(.mui-btn) {
	    		    margin: -11px 15px;
		    }
		    .mui-table-view-cell.mui-collapse .mui-table-view {
		    		margin-left: 0px;
		    }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">日本</h1>
		</header>
		<div class="mui-content">
			<div class="header-bg-div">
				<div class="shadow-div">
					<div class="addr-panel">
						<div class="addr-choose-div">
							<div class="addr-title">长期居住地</div>
							<div>|</div>
							<div class="addr-city"><span>全部</span><img src="../img/detail/down_color_icon.png"/></div>
						</div>
					</div>
					<div class="tips-container">
						<img class="horn-icon" src="../img/detail/horn_icon.png"/>
						<div id="race_notice_s" class="tips-div">
							<div class="tips-content"></div>
						</div>
						<!--<img class="go-detail" src="../img/index/more.png" />-->
					</div>
				</div>
			</div>
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
				签证商品
			</a>
					<a class="mui-control-item" href="#item2mobile">
				办签攻略
			</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="info">
							<div class="swiper-container">
							    <div class="swiper-wrapper">
						            <!--<div class="swiper-slide">
						            		<img class="swiper-img0" src="../img/detail/visa_lvyou.png" />
						            </div>-->
							    </div>
							</div>
							<div class="line-div-w"></div>
							<div class="type-choose-container">
								<!--<div class="type-choose-div">
									<span>加急</span>
								</div>-->
							</div>
							<div class="line-div-n"></div>
							<ul id="visaGoodsUl" class="mui-table-view">
								 <!--<li class="mui-table-view-cell">
								 	<div class="package-title">重庆领域-免费提供机票酒店单</div>
								 	<div class="visa-duration">
										<img class="icon" src="../img/detail/clock_icon.png" />
										<span class="duration">办理8-10工作日</span>
										<div class="price">
											<span>¥666</span>
										</div>
									</div>
								 </li>-->
							</ul>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="info">
							<div class="visa-tips-container">
								<div class="title"></div>
								<div class="tips-bottom">
									<span class="update-time"></span>
									<span class="difficulty-text"></span>
								</div>
							</div>
							<div class="line-div-w"></div>
							<div class="mui-card">
								<ul class="mui-table-view visaTypeUl">
									<!--<li class="mui-table-view-cell mui-collapse">
										<a class="mui-navigate-right" href="#">商务签</a>
										<img class="visa-type-img mui-table-view mui-table-view-chevron" src="../img/index/home_bg.png"/>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="strategy-div">
				<div class="info">
					<div class="visa-tips-container">
						<div class="title"></div>
						<div class="tips-bottom">
							<span class="update-time"></span>
							<span class="difficulty-text"></span>
						</div>
					</div>
					<div class="line-div-w"></div>
					<div class="mui-card">
						<ul class="mui-table-view visaTypeUl">
							<!--<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right" href="#">商务签</a>
								<img class="visa-type-img mui-table-view mui-table-view-chevron" src="../img/index/home_bg.png"/>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
			<div class="bounced-box-container">
				<div class="addr-choose-container">
					<div class="live-title">长期居住地</div>
					<div class="line-div"></div>
					<div class="province-ul">
						<div class="province-li">全部</div>
						<div class="province-li">北京</div>
						<div class="province-li">上海</div>
						<div class="province-li">广东</div>
						<div class="province-li">浙江</div>
						<div class="province-li">江苏</div>
						<div class="province-li">福建</div>
						<div class="province-li">天津</div>
						<div class="province-li">辽宁</div>
						<div class="province-li">吉林</div>
						<div class="province-li">黑龙江</div>
						<div class="province-li">内蒙古</div>
						<div class="province-li">河北</div>
						<div class="province-li">河南</div>
						<div class="province-li">山东</div>
						<div class="province-li">山西</div>
						<div class="province-li">陕西</div>
						<div class="province-li">安徽</div>
						<div class="province-li">江西</div>
						<div class="province-li">湖北</div>
						<div class="province-li">湖南</div>
						<div class="province-li">广西</div>
						<div class="province-li">海南</div>
						<div class="province-li">贵州</div>
						<div class="province-li">云南</div>
						<div class="province-li">重庆</div>
						<div class="province-li">四川</div>
						<div class="province-li">西藏</div>
						<div class="province-li">青海</div>
						<div class="province-li">甘肃</div>
						<div class="province-li">宁夏</div>
						<div class="province-li">新疆</div>
					</div>
				</div>
			</div>
		</div>
		<div id="allmap"></div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vvDsLGKnupC7bpKg1bgqaAYv5veqtzEL"></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var cuntryId = base.getParameter("cuntryId");
		var goodsVisaTypeList = [];
		var goodsVisaTypeId = "", labelId = "", consularDistrictName = "";
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		var point = new BMap.Point(116.331398,39.897445);
		map.centerAndZoom(point,12);
		var geoc = new BMap.Geocoder(); 
	
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				var mk = new BMap.Marker(r.point);
				geoc.getLocation(r.point, function(rs){
					var addComp = rs.addressComponents;
					var locationProvince = '';
					if(addComp.province.length>3) {
						if(addComp.province.indexOf('黑龙江') != -1 || addComp.province.indexOf('内蒙古') != -1) {
							locationProvince = addComp.province.substring(0,3);
						} else {
							locationProvince = addComp.province.substring(0,2);
						}
					} else {
						locationProvince = addComp.province.substring(0,2);
					}
					consularDistrictName = locationProvince;
					$(".addr-city span").text(locationProvince);
//					alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
				}); 
			}
			else {
				alert('failed'+this.getStatus());
			}        
		},{enableHighAccuracy: true})
		$(function() {
			mui('.mui-slider').slider().stopped = true;
			getGoodsListByCuntry();
		})
		var swiper = new Swiper('.swiper-container', {
	      	effect: 'coverflow',
	      	grabCursor: true,
	      	centeredSlides: true,
	      	slidesPerView: 'auto',
	      	spaceBetween: 50,
	      	observer:true,//修改swiper自己或子元素时，自动初始化swiper
			observeParents:true,//修改swiper的父元素时，自动初始化swiper
	      	coverflowEffect: {
	        		rotate: 0,
		    		stretch: 10,
		    		depth: 50,
		    		modifier: 2,
		    		slideShadows : false
	      	},
	      	pagination: {
	        		el: '.swiper-pagination',
	      	},
	    });
	    //监听滚动
		swiper.on('slideChangeTransitionEnd', function () {
			var index = swiper.activeIndex;
			goodsVisaTypeId = goodsVisaTypeList[index].goodsVisaTypeId;
			getGoodsListData();
		});
		$(".swiper-wrapper").on("click",".swiper-slide",function(){
	    		var index = $(this).index();
	    		swiper.slideTo(index);
	    	})
		$(".bounced-box-container").click(function(){
		    $(".bounced-box-container").hide();
		});
		$(".addr-choose-container").click(function(event){
		    event.stopPropagation();
		});
		$(".province-ul").on("tap", ".province-li", function() {
			$(".addr-city span").text($(this).text());
			consularDistrictName = $(this).text();
			$(".bounced-box-container").hide();
			getGoodsListData();
		})
		$(".addr-choose-div").click(function(event){
			$(".bounced-box-container").show();
		})
		$(".type-choose-container").on("tap", ".type-choose-div", function() {
			$(this).toggleClass("selected");
			labelId = "";
			$(".type-choose-container").find(".type-choose-div").each(function() { 
				if($(this).hasClass("selected")) {
					labelId+=$(this).find(".label-Id").text()+",";
				}
			});
			labelId = labelId.substring(0, labelId.length-1);
			getGoodsListData();
		})
		//根据国家查询商品
		function getGoodsListByCuntry() {
			base.setWait('正在获取数据');
			base.postData(base.url.getGoodsListByCuntryId, {cuntryId: cuntryId}, getGoodsListByCuntrySuccess);
		}
		function getGoodsListByCuntrySuccess(data) {
			if (data.success) {
				$(".mui-title").text(data.extendData.countryName);
				$(".header-bg-div").css({"background-image": "url("+data.extendData.countryImg+")", "background-size": "100% 100%"});
				$(".tips-content").text(data.extendData.notice);
				$(".visa-tips-container .title").text(data.extendData.describeStrategy);
				$(".visa-tips-container .tips-bottom .update-time").text("更新时间:"+data.extendData.updateTime);
				$(".visa-tips-container .tips-bottom .difficulty-text").text("办理难度："+getVisaDifficultyStr(data.extendData.difficultyImg));
				document.title = data.extendData.countryName;
            		move();
				//签证商品的标签
				var labelList = data.extendData.labelList;
				var labelHtml = '';
				for(var index in labelList) {
					labelHtml+= '<div class="type-choose-div">'
					labelHtml+= '	<span class="label-Id">'+labelList[index].labelId+'</span>'
					labelHtml+= '	<span>'+labelList[index].labelName+'</span>'
					labelHtml+= '</div>'
				}
				$(".type-choose-container").html(labelHtml);
				
				//签证类型的提示内容
				var visaTypeList = data.extendData.countryVisatypeList;
				var visaTypeHtml = '';
				for(var index in visaTypeList) {
					visaTypeHtml+= '<li class="mui-table-view-cell mui-collapse">'
					visaTypeHtml+= '		<a class="mui-navigate-right" href="#">'+visaTypeList[index].visaTypeName+'</a>'
					visaTypeHtml+= '		<img class="visa-type-img mui-table-view mui-table-view-chevron" src="'+visaTypeList[index].describeImg+'"/>'
					visaTypeHtml+= '</li>'
				}
				$(".visaTypeUl").html(visaTypeHtml);
				
				//签证类型
				goodsVisaTypeList = data.extendData.goodsVisaTypeList;
				if (goodsVisaTypeList.length > 0) {//当签证类型大于0时，默认第一张slide选中，反之则不显示签证商品这一块
					goodsVisaTypeId = goodsVisaTypeList[0].goodsVisaTypeId;
					getGoodsListData();
					var goodsVisaTypeHtml = '';
					for(var index in goodsVisaTypeList) {
						goodsVisaTypeHtml+= '<div class="swiper-slide">'
						goodsVisaTypeHtml+= '	<span class="goodsVisaTypeId">'+goodsVisaTypeList[index].goodsVisaTypeId+'</span>'
						goodsVisaTypeHtml+= '	<img src="'+goodsVisaTypeList[index].backgroundImg+'" />'
						goodsVisaTypeHtml+= '</div>'
					}
					$(".swiper-wrapper").html(goodsVisaTypeHtml);
				} else {
					//隐藏tab，单独显示办证攻略
					$("#slider").hide();
					$(".strategy-div").show();
				}
			}
		}
		function move(){
			var speed = -2;
			var race_notice_s = document.getElementById('race_notice_s');
            var p = race_notice_s.getElementsByTagName('div')[0];
            var length = p.offsetWidth;
//          p.innerHTML +=p.innerHTML;
            function move_do(){
                if(p.offsetLeft < - length){//重新开始
                    p.style.left=0;
                }
                p.style.left = p.offsetLeft + speed +'px';
            }
            setInterval(move_do,100);
        }
		//根据国家查询商品
		function getGoodsListData() {
			var params = {
				cuntryId: cuntryId,
				goodsVisaTypeId: goodsVisaTypeId,
				labelId: labelId,
				consularDistrictName: consularDistrictName
			}
			base.postData(base.url.getGoodsList, params, getGoodsListSuccess);
		}
		function getGoodsListSuccess(data) {
			if (data.success) {
				var goodsList = data.extendData.goodsList;
				var goodsHtml = '';
				for(var index in goodsList) {
					goodsHtml+= '<li class="mui-table-view-cell" style="padding: 18px 15px;border-bottom: 1px solid #F7F6F7;">'
					goodsHtml+= '	<div class="package-goodsId">'+goodsList[index].goodsId+'</div>'
					goodsHtml+= '	<div class="package-title">'+goodsList[index].goodsName+'</div>'
					goodsHtml+= '	<div class="visa-duration">'
					goodsHtml+= '		<img class="icon" src="../img/detail/clock_icon.png" />'
					goodsHtml+= '		<span class="duration">'+goodsList[index].howLong+'</span>'
					goodsHtml+= '		<div class="price">'
					goodsHtml+= '			<span>¥'+goodsList[index].presentPrice+'</span>'
					goodsHtml+= '		</div>'
					goodsHtml+= '	</div>'
					goodsHtml+= '</li>'
				}
				$("#visaGoodsUl").html(goodsHtml);
			}
		}
		$("#visaGoodsUl").on("tap", ".mui-table-view-cell", function() {
			var _goodsId = $(this).find(".package-goodsId").text();
			window.location.href = "visaDetail.html?goodsId="+_goodsId+"&cuntryId="+cuntryId+"&customerId="+customerId+"&consularDistrictName="+consularDistrictName;
		})
	</script>
</html>